<template>
  <div>
    <div class="outerDiv">
      <div class="scrollDiv">
        <scroller>
          <div class="loadingBg" v-if="showLoading">
            <div class="loading">
              <img src="../assets/image/loading.gif" />
            </div>
          </div>
          <div v-else>
            <div class="header">
              <div class="header_top">
                <div class="top_img"><img :src="avatar" style="width: 100%; border-radius: 50%;"></div>
                <div class="top_content">
                  <div class="content_name">
                    <h3>{{ spcailistData.name }}</h3>
                  </div>
                  <div class="content_work">{{ spcailistData.agencyName && spcailistData.title ? (spcailistData.agencyName + ' · ' + spcailistData.title) : '' }}</div>
                  <div class="content_work" style="color: #7B7B7B;">
                    粉丝<span>{{ spcailistData.fansCount }}</span>
                    回答<span>{{ spcailistData.answerCount }}</span>
                    文章<span>{{ spcailistData.articleCount }}</span>
                  </div>
                </div>
              </div>
              <div class="header_describe">
                <span :class="!isOpen ? 'hidden_Line' : ''">
                  <span class="biaodian">"</span>
                  {{ spcailistData.intro }}
                  <span class="openOrNot noMarginLeft" v-if="!isOpen" @click="chooseIsOpen()"><span class="biaodian">...”</span>展开</span>
                  <span class="openOrNot" v-else @click="chooseIsOpen()"><span class="biaodian">"</span>收起</span>
                </span>
              </div>
            </div>
            <div class="content">
              <div class="tabList">
                <div :class="['tabItem', tabSelect ? 'active' : '']" @click="choTab">问答</div>
                <div :class="['tabItem', !tabSelect ? 'active' : '']" @click="choTab">文章</div>
              </div>
              <div v-if="tabSelect">
                <ul class="answerList">
                  <li class="answer_item" v-for="(item, index) of questionAnswerPageVO.list" :key="index"  @click="goto('question',item)">
                    <div class="item_part1">
                      <div>回答了问题</div>
                      <div class="part1_time">{{ item.createTime ? (new Date(item.createTime)).format('yyyy-MM-dd hh:mm') : '' }}</div>
                    </div>
                    <div class="item_part2">
                      <img src="../assets/image/problem.png">
                      <b>{{ item.title }}</b>
                    </div>
                    <div class="item_part3">
                      <div v-for="(item_2, index_2) of item.answerList" :key="index_2">
                        <div style="display: flex; align-items: center;">
                          <div style="width: 0.65rem; height: 0.65rem;"><img :src="avatar" style="width: 100%; border-radius: 50%;"></div>
                          <div style="margin-left: 0.1rem;">{{ spcailistData.name }}</div>
                        </div>
                        <p class="part3_describe">{{ item_2.text }}</p>  
                      </div>
                    </div>
                    <div class="item_part4">
                      <div>{{ item.questionType }}</div>
                      <div class="iconAndTouch">
                        <div class="eyeIcon">
                          <img src="../assets/image/eye.png" alt="">
                          <span>{{ item.viewCount }}</span>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
              <div v-else class="article">
                <div class="noArticle" v-if="parentTopics.length == 0">
                  <div><img src="../assets/image/icon_comment_list_empty.png" ></div>
                  <p>哎呀！还没有文章~</p>
                </div>
                <div v-else>
                  <ul class="article_list">
                    <li class="article_item" v-for="(item, index) of parentTopics" :key="index" @click="goto('informationDetail-h5', item)">
                      <div class="article_item_image"><img :src="item.cover" ></div>
                      <div class="article_item_detail">
                        <div class="detail_name">{{ item.title }}</div>
                        <div class="detail_sort">
                          <div class="sort_type" v-for="(item_2, index_2) of item.labelNameArr" :key="index_2" >{{ item_2 }}</div>
                        </div>
                      </div>
                    </li>
                  </ul>
                  <div class="noMore">没有更多数据了</div>
                </div>
              </div>
            </div>
          </div>
          <div style="width: 7.5rem;height: 1.5rem;"></div>
        </scroller>
        <downLoad :hasShare="hasShare"></downLoad>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import VueScroller from 'vue-scroller';
  Vue.use(VueScroller)
  import api from '../api'
  import downLoad from './../components/common/download/downLoad.vue'
  import { format	} from './../utils/filter'
  
  export default {
    name: 'specialist',
    components: {
      downLoad,
    },
    data() {
      return {
        isOpen: false,
        tabSelect: true,
        pageListTime: '0',
        parentTopics: [],
        avatar: '',
        spcailistData: {},
        questionAnswerPageVO: {},
        showLoading: true,
      }
    },
    mounted() {
      this.specialistDescri();
      this.specialistQuList();
    },
    created () {
      this.agencyUserId = this.$route.query.agencyUserId
      this.hasShare = this.$route.query.hasShare
      window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", this.hengshuping, false);
      this.secondShare(true, {
        url: window.location.href,
        appId: this.appId, // 必填，公众号的唯一标识
      });
    },
    methods: {
      // 选择'展开'或'收起'
      chooseIsOpen() {
        this.isOpen = !this.isOpen;
      },
      choTab(e) {
        this.tabSelect = !this.tabSelect;
        if (!this.tabSelect && this.pageListTime == '0') {
          this.specialistpgList();
          this.pageListTime = '1';
        }
      },
      //二次分享
      secondShare(hasData, params) {
        api.getSecondShareKey(params).then(res => {
          if (res.data.code == 0) {
            let data = res.data.data;
            wx.config({
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: data.appId, // 必填，公众号的唯一标识
              timestamp: data.timestamp, // 必填，生成签名的时间戳
              nonceStr: data.nonceStr, // 必填，生成签名的随机串
              signature: data.signature, // 必填，签名，见附录1
              jsApiList: [
                "chooseImage",
                "previewImage",
                "uploadImage",
                "downloadImage",
                "checkJsApi",
                "onMenuShareTimeline",
                "onMenuShareAppMessage",
                "onMenuShareQQ",
                "onMenuShareWeibo"
              ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });
            this.wxShare(hasData, {
              // title: this.title || "邀您查看提问详情", // 分享标题
              title: "邀您查看专家首页", // 分享标题
              desc: "升学在线,学习超给力", // 分享描述
              link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: this.wxSharePic, // 分享图标
              type: "", // 分享类型,music、video或link，不填默认为link
              dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
              success: function() {
                // 用户确认分享后执行的回调函数
              },
              cancel: function() {
                // 用户取消分享后执行的回调函数
              }
            });
          } else {
          }
        })
        .catch(err => {
        });
      },
      wxShare(hasData, config) {
        let c;
        if (!hasData) {
          c = {};
          c.title = "邀您查看专家首页";
          c.desc = "升学在线,学习超给力";
          (c.link = window.location.href), (c.imgUrl = this.wxSharePic);
        } else {
          c = config;
        }
        if (location.hash == "#debug") {
          alert(JSON.stringify(c));
        }
        wx.ready(function() {
          wx.onMenuShareAppMessage(c);
          wx.onMenuShareTimeline(c);
          wx.onMenuShareQQ(c);
          wx.onMenuShareWeibo(c);
        });
      },
      // 获取专家个人信息
      specialistDescri() {
        const params = {
            agencyUserId: parseInt(this.agencyUserId),
            pageNo: 1,
            pageSize: 15
        }
        this.showLoading = true;
        api.specialistDetail(params).then((res)=> {
          if (res.data.code == 0) {
            this.showLoading = false;  
            this.spcailistData = res.data.data;
            this.avatar = this.spcailistData.avatar;
          }
              
        }).catch(err=> {
        })
      },
      // 获取专家问答列表
      specialistQuList () {
        const params = {
            pid: parseInt(this.agencyUserId),
            pageNo: 1,
            pageSize: 15
        }
        this.showLoading = true;
        api.specialistQuestionList(params).then((res)=> {
          if (res.data.code == 0) {
            this.showLoading = false; 
            const data = res.data.data;
            this.questionAnswerPageVO = data.questionAnswerPageVO;
          }
        }).catch(err=> {
        })
      },
      // 获取专家问答列表
      specialistpgList () {
        const params = {
            expertId: parseInt(this.agencyUserId),
            pageNo: 1,
            pageSize: 15,
            beginReadTime: "2019-04-03T08:10:18.318Z",
        }
        this.showLoading = true; 
        api.specialistPageList(params).then((res)=> {
          if (res.data.code == 0) {
            this.showLoading = false; 
            this.parentTopics = res.data.data.parentTopics;
          }
        }).catch(err=> {
        })
      },
      // 路由跳转
      goto(routerName, queryData) {
        let sendQuery = {};
        if (routerName == 'question') {
          sendQuery = {
            questionId: queryData.questionId,
            hasShare: true,
					};
        } else if (routerName == 'informationDetail-h5') {
            sendQuery = {
              tid: queryData.articleId,
              hasShare: true,
            };
        }
				this.$router.push({
					path: routerName,
					query: sendQuery,
				});
      },
    }
  }
</script>

<style lang="scss" scoped>
  @import "../styles/mixin.scss";
  .loadingBg{
    background: #fff;
    position: fixed;
    height: 100vh;
    line-height: 100vh;
    width: 100%;
    z-index: 999;
    .loading{
      width: px2rem(200);
      height: px2rem(200);
      display: block;
      position: fixed;
      left: 50%;
      top: 50%;
      z-index: 9999;
      margin-left: px2rem(-100);
      margin-top: px2rem(-100);
      background-size: 10% 10%;
      img{
          width: 100%
      }
    }
  }

  .outerDiv {
    width: 100%;
    position: relative;
    .scrollDiv {
      width: 100%;
      height: 100vh;
      background: #F5F5F5;
      .header {
        padding: 0 px2rem(30) px2rem(20);
        margin-bottom: px2rem(20);
        background-color: #fff;
        .header_top {
          padding-top: px2rem(35);
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .top_img {
            width: px2rem(140);
            height: px2rem(140);
          }
          .top_content {
            width: 100%;
            margin-left: px2rem(30);
            padding-bottom: px2rem(30);
            .content_name {
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: px2rem(35);
              div {
                width: 1.32rem;
                height: px2rem(48);
                line-height: px2rem(48);
                text-align: center;
                border-radius: px2rem(24);
                font-size: px2rem(30);
              }
              .noTouch {
                color: #fff;
                background-color: #94E05C;
              }
              .isTouched {
                color: #B5B5B5;
                background: #EEEEEE;
              }
            }
            .content_work {
              font-size: px2rem(27);
              color: #353535;
              span {
                margin: 0 px2rem(10);
              }
            }
          }
        }
        .header_describe {
          color: #666;
          background: #FAFAFA;
          padding: px2rem(20) px2rem(20) px2rem(10);
          font-size: px2rem(28);
          letter-spacing: px2rem(3);
          .hidden_Line {
            word-break: break-all;
            display: -webkit-box;
            position: relative;
            /*! autoprefixer: off */
            -webkit-box-orient: vertical;
            /* autoprefixer: on */
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          .biaodian { color: #CACACA; }
          .openOrNot {
            color: #65BE1F;
            margin-left: px2rem(10);
            
          }
          .openOrNot.noMarginLeft {
            margin-left: 0;
            position: absolute;
            bottom:0;
            right: px2rem(6);
            background: #fafafa;
          }
        }
      }
      .content {
        width: 100%;
        background-color: #fff;
        .tabList {
          font-size: px2rem(35);
          display: flex;
          justify-content: center;
          align-items: center;
          height: px2rem(100);
          border-bottom: 2px solid #EEE;
          .tabItem:first-child { margin-right: px2rem(140); }
          .tabItem.active {
            border-bottom: px2rem(6) solid #65BE1F;
          }
          .tabItem {
            height: 100%;
            line-height: px2rem(100);
          }
        }
        .answerList {
          list-style: none;
          padding-left: px2rem(32);
          margin-bottom: px2rem(140);

          .answer_item {
            padding-right: px2rem(32);
            border-bottom: 2px solid #FAFAFA;
            .item_part1 {
              margin-top: px2rem(20);
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: px2rem(28);
              .part1_time {
                color: #C1C1C1;
                font-size: px2rem(25);
              }
            }
            .item_part2 {
              margin-top: px2rem(30);
              margin-bottom: px2rem(40);
              display: flex;
              justify-content: flex-start;
              font-size: px2rem(30);
              img {
                width: px2rem(55);
                height: px2rem(40);
                margin-right: px2rem(20);
              }
              b {
                word-break: break-all;
                display: -webkit-box;
                /*! autoprefixer: off */
                -webkit-box-orient: vertical;
                /* autoprefixer: on */
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                overflow: hidden;
              }
            }
            .item_part3 {
              max-height: px2rem(175);
              background-color: #F0F0F0;
              margin-bottom: px2rem(55);
              padding: px2rem(20) px2rem(35);
              .part3_describe {
                word-break: break-all;
                display: -webkit-box;
                /*! autoprefixer: off */
                -webkit-box-orient: vertical;
                /* autoprefixer: on */
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                overflow: hidden;
                font-size: px2rem(25);
                letter-spacing: px2rem(5);
                color: #C8C8C8;
                margin-top: px2rem(15);
              }
            }
            .item_part4 {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding-bottom: px2rem(30);
              color: #B1B1B1;
              font-size: px2rem(25);
              .iconAndTouch {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-right: px2rem(10);
                .eyeIcon {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  img {
                    width: px2rem(30);
                    height: px2rem(30);
                  }
                  span {
                    margin-left: px2rem(10);
                  }
                }
              }
            }
          }
        }
        
        .article {
          text-align: center;
          .noArticle {
            padding: px2rem(170) px2rem(30);
            img {
              width: px2rem(280);
              height: px2rem(280);
            }
            p {
              margin-top: px2rem(25);
              color: #999A9C;
            }
          }
          .article_list {
            list-style: none;
            padding: px2rem(30);
            padding-bottom: 0;
            .article_item {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: px2rem(30) 0;
              border-bottom: px2rem(1) solid #F5F5F5;
              .article_item_image {
                img {
                  border-radius: px2rem(10);
                  width: px2rem(200);
                  height: px2rem(125);
                }
              }
              .article_item_detail {
                text-align: left;
                margin-left: px2rem(50);
                display: flex;
                flex-direction:column;
                justify-content: space-between;
                .detail_name {
                  font-size: px2rem(25);
                  color: #222;
                  margin-bottom: px2rem(20);
                  letter-spacing: px2rem(2);
                }
                .detail_sort {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  .sort_type {
                    font-size: px2rem(20);
                    color: #BBB;
                    border: px2rem(1) solid #F5F5F5;
                    background: #FFF;
                    padding: px2rem(10) px2rem(20);
                    border-radius: px2rem(10);
                  }
                  .sort_icon {
                    display: flex;
                    align-items: center;
                    img {
                      width: px2rem(30);
                      margin-top: px2rem(5);
                    }
                    span {
                      color: #BBB;
                      font-size: px2rem(25);
                      margin-left: px2rem(10);
                    }
                  }
                }
              }
            }
          }
          .noMore {
            color: #999;
            font-size: px2rem(30);
            background: #F5F5F5;
            padding-top: px2rem(30);
          }
        }
      }
    }
  }
</style>

